<template>
  <div class="content">
    <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 24px; font-weight: bold; font-size: 24px; margin-top: 24px;">
      维修记录
    </div>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%"
      >
        <el-table-column type="expand">
          <template #default="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="维修记录ID" style="width: 80%">
                <span>{{ props.row.maintenanceRecordsId }}</span>
              </el-form-item>
              <el-form-item label="用户编号" style="width: 80%">
                <span>{{ props.row.userNo }}</span>
              </el-form-item>
              <el-form-item label="姓名" style="width: 80%">
                <span>{{ props.row.fullName }}</span>
              </el-form-item>
              <el-form-item label="类型" style="width: 80%">
                <span>{{ props.row.type }}</span>
              </el-form-item>
              <el-form-item label="标题" style="width: 80%">
                <span>{{ props.row.title }}</span>
              </el-form-item>
              <el-form-item label="报修时间" style="width: 80%">
                <span>{{ props.row.repairTime }}</span>
              </el-form-item>
              <el-form-item label="联系电话" style="width: 80%">
                <span>{{ props.row.contactNumber }}</span>
              </el-form-item>
              <el-form-item label="维修地址" style="width: 80%">
                <span>{{ props.row.repairAddress }}</span>
              </el-form-item>
              <el-form-item label="故障描述" style="width: 80%">
                <span>{{ props.row.faultDescription }}</span>
              </el-form-item>
              <el-form-item label="员工工号" style="width: 80%">
                <span>{{ props.row.employeeId }}</span>
              </el-form-item>
              <el-form-item label="员工姓名" style="width: 80%">
                <span>{{ props.row.employeeName }}</span>
              </el-form-item>
              <el-form-item label="派工时间" style="width: 80%">
                <span>{{ props.row.dispatchTime }}</span>
              </el-form-item>
              <el-form-item label="维修状态" style="width: 80%">
                <span>{{ props.row.maintenanceStatus }}</span>
              </el-form-item>
              <el-form-item label="记录时间" style="width: 80%">
                <span>{{ props.row.recordTime }}</span>
              </el-form-item>
              <el-form-item label="维修详情" style="width: 80%">
                <span>{{ props.row.repairDetails }}</span>
              </el-form-item>
              <el-form-item label="维修照片" style="width: 80%">
                <template v-if="props.row.repairImage === '暂无图片'">
                  <div>暂无图片</div>
                </template>
                <template v-else>
                  <img :src="`http://localhost${props.row.repairImage}`" style="max-width: 100%; height: auto" />
                </template>
              </el-form-item>
              <el-form-item label="创建时间" style="width: 80%">
                <span>{{ props.row.createTime }}</span>
              </el-form-item>
              <el-form-item label="更新时间" style="width: 80%">
                <span>{{ props.row.updateTime }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            label="维修单号"
            prop="maintenanceRecordsId"
        ></el-table-column>
        <el-table-column
            label="故障名称"
            prop="title"
        ></el-table-column>
        <el-table-column
            label="维修进度"
            prop="maintenanceStatus"
        ></el-table-column>
      </el-table>
    </div>
  </div>
  <div class="bottom-fixed-button">
    <el-button type="primary" style="width: 90%;" @click="returnToTechnician">返回菜单</el-button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useStore } from 'vuex';

const router = useRouter();

const tableData = ref([]);

const returnToTechnician = () => {
  router.push('/technician/home');
};

const store = useStore();

onMounted(async () => {
  try {
    const user = store.getters.user;
    if (!user || !user.repairPersonnelId) {
      ElMessage.error('用户未登录或用户信息不完整');
      return;
    }

    const response = await axios.get(`http://localhost:8003/maintenance-records/repair/getMaintenanceRecords/${user.repairPersonnelId}`);
    if (response.status === 200) {
      tableData.value = response.data;
    }
  } catch (error) {
    console.error('Error fetching data:', error);
    ElMessage.error('获取维修记录失败');
  }
});
</script>

<style scoped>
.content {
  min-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-bottom: 50px;
}

.bottom-fixed-button {
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
}

.demo-table-expand {
  font-size: 14px;
  padding: 16px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.demo-table-expand label {
  width: 120px;
  color: #606266;
  margin-right: 16px;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 16px;
  width: calc(50% - 16px);
}

.content > div:first-child {
  padding-bottom: 24px;
}
</style>
